<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 项目</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .datepicker {
        z-index: 1600 !important; /* has to be larger than 1050 */
        }
        .bootstrap-datetimepicker-widget 
        {
        z-index: 1601   !important;
            }
        </style>
</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInUp">
        <div class="row">
            <div class="col-sm-12">

                <div class="ibox">
                    <div class="ibox-title">
                        <h5>所有任务</h5>
                        <div class="ibox-tools">
                            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#addProject">
                                创建新任务
                            </button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-md-1">
                                <button type="button" id="loading-example-btn" class="btn btn-white btn-sm"><i class="fa fa-refresh"></i>
                                    刷新</button>
                            </div>
                            <div class="col-md-11">
                                <div class="input-group">
                                    <input type="text" placeholder="请输入项目名称" class="input-sm form-control" id="search-ipt"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary" onclick="search_task()"> 搜索</button> </span>
                                </div>
                            </div>
                        </div>

                        <div class="project-list">
                            <table class="table table-hover" id="table-hover">

                            </table>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-white" onclick="nextPage()" id="nextbtn"><i class="fa fa-chevron-left"></i>
                            </button>
                            <button type="button" class="btn btn-white" onclick="lastPage()" id="lastbtn"><i class="fa fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="editProject" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                            class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">编辑任务</h4>
                    <small class="font-bold">把不想作的任务都改了去
                </div>
                <div class="modal-body">
                    <div class="form-group"><label>项目名称</label> <input type="text" disable placeholder="请输入项目名称" id="edit-name"
                            class="form-control" disabled></div>
                    <div class="form-group"><label>开始时间</label> <input type="date" placeholder="请输入开始时间" id="edit-start"
                            class="form-control"></div>
                    <div class="form-group"><label>结束时间</label> <input type="date" placeholder="请输入结束时间" id="edit-end"
                            class="form-control"></div>
                    <div class="form-group"><label>预计时间</label> <input type="date" placeholder="请输入预计时间" id="edit-plane"
                            class="form-control"></div>
                    <input type="hidden" id="edit-id">
                    <div class="form-group">
                        <label>状态:</label>
                        <select class="form-control m-b" name="account" id="edit-status">
                            <option>准备</option>
                            <option selected>开始</option>
                            <option>暂停</option>
                            <option>完成</option>
                            <option>取消</option>
                        </select>
                    </div>
                    <div class="form-group"><label>进度</label> <input type="number" placeholder="请输入预计时间" id="edit-process"
                            class="form-control" max="99" min="0" onkeydown="return false;"></div>
                    <div class="form-group">
                        <label>负责人:</label>
                        <select class="form-control m-b" name="account" id="edit-leader">

                        </select>
                    </div>
                    <div class="form-group"><label>任务内容</label> <input type="text" id="edit-remarks" placeholder="请输入项目备注"
                            class="form-control"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="project_edit()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="infoProject" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                            class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">任务详情</h4>
                    <small class="font-bold">沉迷工作,日渐消瘦
                </div>
                <div class="modal-body">
                    <div class="form-group"><label>名称</label> <input type="text" disabled id="info-name" placeholder="请输入项目名称"
                            class="form-control"></div>
                    <div class="form-group"><label>开始时间</label> <input type="text" disabled id="info-start" placeholder="请输入开始时间"
                            class="form-control"></div>
                    <div class="form-group"><label>结束时间</label> <input type="text" disabled id="info-end" placeholder="请输入结束时间"
                            class="form-control"></div>
                    <div class="form-group"><label>预计时间</label> <input type="text" disabled id="info-plane" placeholder="请输入预计时间"
                            class="form-control"></div>
                    <div class="form-group"><label>状态</label> <input type="text" disabled id="info-status" placeholder="请输入预计时间"
                            class="form-control"></div>
                    <div class="form-group"><label>进度</label> <input type="number" disabled placeholder="请输入预计进度" id="info-process"
                            class="form-control" max="99" min="0"></div>
                    <div class="form-group"><label>负责人</label> <input type="text" disabled id="info-leader" placeholder="请输入预计时间"
                            class="form-control"></div>
                    <div class="form-group"><label>备注</label> <input type="text" disabled id="info-remarks" placeholder="请输入预计时间"
                            class="form-control"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="addProject" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                            class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">新建任务</h4>
                    <small class="font-bold">雄关漫道真如铁
                </div>
                <div class="modal-body">
                    <div class="form-group"><label>项目名称</label>
                        <select class="form-control m-b" name="account" id="creat-projectname" onchange="project_change()">
                        </select>
                    </div>
                    <div class="form-group"><label>开始时间</label> <input type="date" id="creat-start" placeholder="请输入开始时间"
                            class="form-control"></div>
                    <div class="form-group"><label>结束时间</label> <input type="date" id="creat-end" placeholder="请输入结束时间"
                            class="form-control"></div>
                    <div class="form-group"><label>预计时间</label> <input type="date" id="creat-plane" placeholder="请输入预计时间"
                            class="form-control"></div>
                    <div class="form-group">
                        <label>状态:</label>
                        <select class="form-control m-b" name="account" id="creat-status">
                            <option selected>准备</option>
                            <option>开始</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>负责人:</label>
                        <select class="form-control m-b" name="account" id="creat-leader">

                        </select>
                    </div>
                    <div class="form-group"><label>备注</label> <input type="text" id="creat-remarks" placeholder="请输入项目备注"
                            class="form-control"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="project_create()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/jquery/search.js"></script>


    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <!-- Data picker -->
    <script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="js/host.js"></script>

    <script>
        var page = 1;
        var size = 10;
        var totalPage = 0;
        var totalSize = 0;
        var have_next = false;
        var creat_projectid = 0;
        //var localhost = "http://127.0.0.1:8000"

        // 上一页
        function nextPage() {
            page -= 1;
            if (page < 1) {
                // $("#nextbtn").attr("disabled", true);
                // $("#lastbtn").attr("disabled", false);
                page += 1;
            }
            project_list(page, size);
        }

        //下一页
        function lastPage() {
            page += 1;
            if (page > totalPage) {
                // $("#lastbtn").attr("disabled", true);
                // $("#nextbtn").attr("disabled", false);
                page -= 1;
            }
            project_list(page, size);
        }

        function project_create() {
            var object_id = $('#creat-projectname').val();
            var start = $('#creat-start').val();
            if (start.length==0) {
                alert("必须设置开始时间");
                return;
            }
            var end = $('#creat-end').val();
            var plane = $('#creat-plane').val();
            var status = $('#creat-status').val();
            var leader = $('#creat-leader').val();
            var content = $('#creat-remarks').val();
            
            var date1 = new Date(start)
            var date2 = new Date(end)
            var date3 = new Date(plane)
            if (date1.getTime() > date2.getTime() || date1.getTime() > date3.getTime()) {
                alert("想时光倒流？这个系统帮不了你");
                return;
            } 
            if (remarks.length == 0) {
                alert("对这个任务你不想说点什么吗");
                return;
            }
            
            switch (status) {
                case "准备": status = 0; break;
                case "开始": status = 1; break;
                case "暂停": status = 2; break;
                case "完成": status = 3; break;
                case "取消": status = 4; break;
                default: status = -1; break;
            }

            var project_id = null;
            $.ajax({
                type: "POST",
                url: localhost + "/task/taskAdd",
                data: '{ "object_id": "' + object_id + '", "leader": ' + leader + ',"status":' + status + ',"start_date":"' + start + '","plane_time":"' + plane + '","content":"' + content + '","end_date":"' + end + '" }',
                dataType: "json",
                xhrFields: {
                    withCredentials: true
                },
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        project_id = data["response_data"]["id"]
                        if (project_id == null) {
                            alert("创建失败");
                            return;
                        }
                        $.ajax({
                            type: "POST",
                            url: localhost + "/task/taskMemberUserAdd",
                            // session_user_id通过session获得
                            data: '{ "task_id":' + project_id + ',"remarks":"' + "leader" + '","session_user_id": ' + leader + ',"project_id":' + object_id + '}',
                            xhrFields: {
                                withCredentials: true
                            },
                            dataType: "json",
                            success: function (data) {
                                if (data["response_msg"] == "success") {
                                    alert("创建成功");
                                    project_list(1, 10);
                                } else {
                                    alert("创建失败:" + data["response_msg"]);
                                }
                            },
                            error: function (data) {
                                alert("创建失败");
                            }
                        });

                    } else {
                        alert("创建失败:" + data["response_msg"]);
                    }
                },
                error: function (data) {
                    alert("创建失败");
                }
            });
            $('#addProject').modal('hide');
        }

        function project_detail(id) {
            $.ajax({
                type: "POST",
                url: localhost + "/task/taskInfo",
                data: '{ "id":' + id + ' }',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        data = data["response_data"][0]
                        $('#info-name').val(data["name"]);
                        $('#info-leader').val(data["leader"]);
                        if (data["start_date"] != null)
                            $('#info-start').val(data["start_date"].substring(0, 10));
                        if (data["end_date"] != null)
                            $('#info-end').val(data["end_date"].substring(0, 10));
                        if (data["plane_time"] != null)
                            $('#info-plane').val(data["plane_time"].substring(0, 10));
                        $('#info-remarks').val(data["content"]);
                        $('#info-process').val(data["process"]);
                        switch (data['status']) {
                            case 0: $('#info-status').val("准备"); break;
                            case 1: $('#info-status').val("开始"); break;
                            case 2: $('#info-status').val("暂停"); break;
                            case 3: $('#info-status').val("完成"); break;
                            case 4: $('#info-status').val("取消"); break;
                            default: $('#info-status').val("未知"); break;
                        }
                    }
                }
            });
        }

        function project_list_detail() {
            $.ajax({
                type: "POST",
                url: localhost + "/project/projectInfoPerson",
                data: '{ "id": null }', //暂时测试,正式需要将其改为null
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        $('#creat-projectname').empty();
                        var html = '';
                        $.each(data["response_data"], function (commentIndex, comment) {
                            if (comment["user_name"] == comment["leader"]) {
                                html += '<option selected="selected" value=' + comment["id"] + '>' + comment["name"] + '</option>';
                            } else {
                                html += '<option value=' + comment["id"] + '>' + comment["name"] + '</option>';
                            }
                        });
                        $('#creat-projectname').html(html);
                        leader_list("creat-leader", $('#creat-projectname').val());
                    }
                }
            });
        }

        function project_change() {
            var creat_projectid = $('#creat-projectname').val();
            $.ajax({
                type: "POST",
                url: localhost + "/task/projectTaskLeaderList",
                data: '{ "project_id": ' + creat_projectid + '}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        $('#creat-leader').empty();
                        var html = '';
                        $.each(data["response_data"], function (commentIndex, comment) {
                            html += '<option value=' + comment["id"] + '>' + comment["user_name"] + ' </option>'
                        });
                        $('#creat-leader').html(html);
                    }
                }

            });
        }

        function project_edit() {
            var name = $('#edit-name').val();
            var start = $('#edit-start').val();
            var end = $('#edit-end').val();
            var plane = $('#edit-plane').val();
            
            var date1 = new Date(start)
            var date2 = new Date(end)
            var date3 = new Date(plane)

            if (date1.getTime()>date2.getTime() || date1.getTime()>date3.getTime()){
                alert("想时光倒流？这个系统帮不了你");
                return;
            }

            var status = $('#edit-status').val();
            var leader = $('#edit-leader').val();
            var remarks = $('#edit-remarks').val();
            var process = $('#edit-process').val();
            if(remarks.length==0){
                alert("对这个任务你不想说点什么吗");
                return;
            }
            switch (status) {
                case "准备": status = 0; break;
                case "开始": status = 1; break;
                case "暂停": status = 2; break;
                case "完成": status = 3; break;
                case "取消": status = 4; break;
                default: status = -1; break;
            }
            var id = $('#edit-id').val();

            if (status < 2) {
                var url = "/task/taskEdit";
            } else if (status = 3) {
                var url = "/task/taskOver";
                process = 100;
            } else if (status = 4) {
                var url = "/task/taskOver";
                process = 0;
            } else if (status = 2) {
                var url = "/task/taskOver";
            }

            $.ajax({
                type: "POST",
                url: localhost + url,
                xhrFields: {
                    withCredentials: true
                },
                data: '{ "name": "' + name + '", "leader": ' + leader + ',"status":' + status + ',"start_date":"' + start + '","plane_time":"' + plane + '","remarks":"' + remarks + '","end_date":"' + end + '","id":' + id + ',"process":' + process + '}',
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        alert("编辑成功");
                        project_list(1, 10);
                    } else {
                        alert("编辑失败:" + data["response_msg"]);
                    }
                },
                error: function (data) {
                    alert("编辑失败");
                }
            });
            $('#editProject').modal('hide');
        }


        function set_select_checked(selectId, checkValue) {
            var select = document.getElementById(selectId);
            $.each(select.childNodes, function (commentIndex, comment) {
                if (comment.text == checkValue) {
                    comment.selected = true;
                    return false
                }
            })
        }

        function project_edit_init(id) {
            $.ajax({
                type: "POST",
                url: localhost + "/task/taskInfo",
                data: '{ "id":' + id + ' }',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        data = data["response_data"][0]
                        $('#edit-name').val(data["name"]);
                        //$('#edit-leader').val(data["leader"]);
                        if (data["start_date"] != null)
                            $('#edit-start').val(data["start_date"].substring(0, 10));
                        if (data["end_date"] != null)
                            $('#edit-end').val(data["end_date"].substring(0, 10));
                        if (data["plane_time"] != null)
                            $('#edit-plane').val(data["plane_time"].substring(0, 10));
                        $('#edit-remarks').val(data["content"]);
                        $('#edit-process').val(data["process"]);
                        $('#edit-id').val(id);
                        switch (data['status']) {
                            case 0: $('#edit-status').val("准备"); break;
                            case 1: $('#edit-status').val("开始"); break;
                            case 2: $('#edit-status').val("暂停"); break;
                            case 3: $('#edit-status').val("完成"); break;
                            case 4: $('#edit-status').val("取消"); break;
                            default: $('#edit-status').val("未知"); break;
                        }
                        leader_list("edit-leader", data["object_id"]);
                        set_select_checked("edit-leader", data["leader"]);
                    }
                }

            });
        }

        function project_list(page, size) {
            $.ajax({
                type: "POST",
                url: localhost + "/task/taskList",
                data: '{ "page": ' + page + ', "size": ' + size + '}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        totalPage = data["response_data"]["total_page"];
                        totalSize = data["response_data"]["total_size"];
                        $('#table-hover').empty();
                        var html = '<tbody>';
                        $.each(data["response_data"]["data"], function (commentIndex, comment) {
                            html += '<tr>';
                            if (comment["status"] == 0) {
                                html += '<td class="project-status"><span class="label label-primary">准备中</td>';
                            } else if (comment["status"] == 1) {
                                html += '<td class="project-status"><span class="label label-primary">进行中</td>';
                            } else if (comment["status"] == 2) {
                                html += '<td class="project-status"><span class="label label-primary">暂停</td>';
                            } else if (comment["status"] == 3) {
                                html += '<td class="project-status"><span class="label label-primary">完成</td>';
                            } else if (comment["status"] == 4) {
                                html += '<td class="project-status"><span class="label label-primary">取消</td>';
                            }

                            html += '<td class="project-title"><a href="task_detail.html">' + comment['content'] + '</a><br /><small>创建于 ' + comment['start_date'] + '</small></td>'
                            html += '<td class="project-completion"><small>当前进度： ' + comment["process"] + '%</small><div class="progress progress-mini"><div style="width: ' + comment["process"] + '%;" class="progress-bar"></div></div></td>'
                            html += '<td class="project-people"><h4>负责人:</h4><small>' + comment["leader"] + '<small></a></td>'
                            html += '<td class="project-actions"><button type="button" onclick="project_detail(' + comment["id"] + ')" class="btn btn-white btn-sm" data-toggle="modal" data-target="#infoProject"><i class="fa fa-folder"></i>查看</button><button type="button"  onclick="project_edit_init(' + comment["id"] + ')" class="btn btn-white btn-sm" data-toggle="modal" data-target="#editProject"><i class="fa fa-pencil"></i>编辑 </button></td>'
                            html += '</tr>';
                        });
                        html += '</tbody>'
                        $('#table-hover').html(html);
                    }
                }
            });
        }


        function leader_list(select_name, id) {
            $.ajax({
                type: "POST",
                url: localhost + "/task/projectTaskLeaderList",
                data: '{ "project_id": ' + id + '}',
                xhrFields: {
                    withCredentials: true
                },
                dataType: "json",
                success: function (data) {
                    if (data["response_msg"] == "success") {
                        $('#' + select_name).empty();
                        var html = '';
                        $.each(data["response_data"], function (commentIndex, comment) {
                            html += '<option value=' + comment["id"] + '>' + comment["user_name"] + ' </option>'
                        });
                        $('#' + select_name).html(html);
                    }
                }
            });
        }

        $(document).ready(function () {


            $('#loading-example-btn').click(function () {
                btn = $(this);
                simpleLoad(btn, true)

                project_list(1, 10)

                simpleLoad(btn, false)
            });

            $('#datepicker .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });
            project_list(1, 10);
            // leader_list();
            project_list_detail();
        });

        function simpleLoad(btn, state) {
            if (state) {
                btn.children().addClass('fa-spin');
                btn.contents().last().replaceWith(" 加载中...");
            } else {
                setTimeout(function () {
                    btn.children().removeClass('fa-spin');
                    btn.contents().last().replaceWith(" 刷新");
                }, 2000);
            }
        }
    </script>



</body>

</html>